import { AntdModalProps } from '@/hooks/useAntdModal';
import { saveNotice } from '@/service/globalSetting';
import { Button, Checkbox, Divider, Form, Input, Modal, Radio, Select } from 'antd';
import React from 'react';
const PushPanel = ({ noticeType, name, text }: any): any => {

  if (noticeType?.includes(name)) {
    return <div>
      <Divider >{text}</Divider>
      <Form.Item name={`${name}Mode`} label="推送方式">
        <Radio.Group>
          <Radio value={`${name}Api`}>api</Radio>
          <Radio value={`${name}Webhook`}>webhook</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item noStyle shouldUpdate={(a, b) => a[`${name}Mode`] != b[`${name}Mode`]}>
        {
          ({ getFieldValue }) => {
            const mode = getFieldValue(`${name}Mode`);
            if (mode === `${name}Api`) {
              return <>
                <Form.Item label='选择Api' name={`${name}Api`} rules={[{
                  required: true,
                  message: '选择Api'
                }]}>
                  <Input />
                </Form.Item>
                <Form.Item name={`${name}Receive`} label='接收人' rules={[{
                  required: true,
                  message: '接收人'
                }]}>
                  <Input />
                </Form.Item>
              </>

            }
            return <Form.Item label='webhook地址' name={`${name}Webhook`} rules={[{
              required: true,
              message: 'webhook地址'
            }]}>
              <Input />
            </Form.Item>
          }
        }
      </Form.Item>
    </div>
  }
  return null
}
const SaveNotice = ({ form, modalProps,closeModal,refresh, }: AntdModalProps) => {
  const onOk = async () => {
    let data = await form.validateFields()
    data.default = data.default ? 0 : 1
    if (Array.isArray(data.noticeType)) {
      data.noticeType = data.noticeType.join(',')
    }
   await saveNotice(data)
   closeModal();
   refresh()
  }
  const onPreview = ()=>{
       let text = form.getFieldValue('template');
       let html = text.replace(/\n/g,'<br/>');
       html = html.replace(/\*\*([\s\S]+)\*\*/g,'<b>$1</b>')
       html = html.replace(/\[([\s\S]+)\]\(([\s\S]+)\)/,'<a herf="$2">$1</a>')
      //  html = html.replace(/<%=[\s\S]?%>/g,'字段替换')
       console.log({html})
       Modal.info({
        icon:null,
        width:600,
        title:'预览',
        content:<div dangerouslySetInnerHTML={{__html:html}}></div>
       })
  }
  return (<Modal width={800} title="账号类型" {...modalProps} onOk={onOk}>
    <Form form={form} labelCol={{ span: 4 }}
      initialValues={{
      }}
    >
      <Form.Item hidden name='id'>
        <Input />
      </Form.Item>
      <Form.Item label="名称" name='title' rules={[{
        required: true,
        message: '账号类型'
      }]}>
        <Input placeholder='名称' />
      </Form.Item>
      <Form.Item label="通知类型" name='noticeType' rules={[{
        required: true,
        message: '通知类型'
      }]}>
        <Select mode='multiple' placeholder="请选择" options={[{
          value: 'feishu',
          label: '飞书'
        }, {
          value: 'dingding',
          label: '钉钉'
        }, {
          value: 'weixin',
          label: '微信'
        }]} />
      </Form.Item>
      <Form.Item noStyle shouldUpdate={(a, b) => a.noticeType != b.noticeType}>
        {({ getFieldValue }) => {
          const noticeType = getFieldValue('noticeType')
          let children: any[] = [
            <PushPanel key='feishu' noticeType={noticeType} name='feishu' text='飞书' />,
            <PushPanel key='weixin' noticeType={noticeType} name='weixin' text='微信' />,
            <PushPanel key='dingding' noticeType={noticeType} name='dingding' text='钉钉' />,
          ].filter(v => v)

         
         
          return children
        }}
      </Form.Item>


      <Form.Item help={<Button onClick={onPreview} size='small'>预览</Button>} label="通知模板" name='template' >
        <Input.TextArea rows={10} />
      </Form.Item>
      {/* <Form.Item label="是否默认" name='default' >
        <Checkbox />
      </Form.Item> */}
    </Form>
  </Modal>)
}
export default SaveNotice